<template>
  <van-popup v-model="popupArea" round position="bottom" :closeable="isNoData">
    <template>
      <van-area
        :loading="loading"
        :value="areaValue"
        :area-list="areaList"
        :columns-num="3"
        @cancel="close"
        @confirm="onConfirm"
      />
    </template>
  </van-popup>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
  props: {
    defaultArea: {
      type: Array,
      required: false,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      popupArea: false,
      loading: false,
      areaList: {},
      areaValue: '',
      isNoData: false,
      changeCityCode: {}, // 被转化的市级列表
      changeCityCode_c_t: {}, // 被转化的市级列表 正确对应回显
      changeCountyCode: {}, // 被转化的县级列表
      changeCountyCode_c_t: {} // 被转化的县级列表 正确对应回显
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache
    })
  },
  watch: {
    'cache.district': function() {
      this.areaList = this.handleAreaList();
    },
    defaultArea() {
      // 回显转化代码
      let _countryCode = this.defaultArea[2];
      let _cityCode = this.defaultArea[1];
      if (_countryCode && this.changeCountyCode_c_t[_countryCode]) {
        _countryCode = this.changeCountyCode_c_t[_countryCode];
      }
      if (_cityCode && this.changeCityCode_c_t[_cityCode]) {
        _cityCode = this.changeCityCode_c_t[_cityCode];
      }
      const areaValue = _countryCode || _cityCode || this.defaultArea[0] || null;
      this.areaValue = areaValue || '110000';
    }
  },
  created() {
    this.getDictByType(['district']);
    this.areaList = this.handleAreaList();
  },
  methods: {
    ...mapActions({ getDictByType: 'dict/getDictByType' }),
    open() {
      this.popupArea = true;
    },
    close() {
      this.popupArea = false;
    },
    onConfirm(areaValue) {
      const returnCode = JSON.parse(JSON.stringify(areaValue));
      // 对比回显正确的被转化市县级code
      if (this.changeCityCode[returnCode[1].code]) {
        returnCode[1].code = this.changeCityCode[returnCode[1].code];
      }
      if (this.changeCountyCode[returnCode[2].code]) {
        returnCode[2].code = this.changeCountyCode[returnCode[2].code];
      }
      this.$emit('onConfirm', returnCode);
    },
    // 处理省市数据
    handleAreaList() {
      const areaList = {
        province_list: {},
        city_list: {},
        county_list: {}
      };
      const district = this.cache.district || [];
      if (!district.length) return areaList;
      for (let i = 0; i < district.length; i++) {
        const item = district[i];
        item.children = item.children || [];
        areaList.province_list[item.code] = item.name;
        for (let j = 0; j < item.children.length; j++) {
          const jtem = item.children[j];
          jtem.children = jtem.children || [];
          let _isTrueCityCode = true; // 是否为正确的市级code
          let _cityCode = jtem.code;
          // 处理市级code不规范问题
          if (jtem.code.substring(4, 6) !== '00') {
            _isTrueCityCode = false;
            _cityCode = `${jtem.code.substring(0, 2)}${jtem.code.substring(2, 4) - jtem.code.substring(4, 6)}00`;
            this.changeCityCode[_cityCode] = jtem.code;
            this.changeCityCode_c_t[jtem.code] = _cityCode;
          }
          areaList.city_list[_cityCode] = jtem.name;
          for (let k = 0; k < jtem.children.length; k++) {
            const ktem = jtem.children[k];
            let _countyCode = ktem.code;
            if (!_isTrueCityCode) {
              _countyCode = `${_cityCode.substring(0, 4)}${ktem.code.substring(4, 6)}`;
              this.changeCountyCode[_countyCode] = ktem.code;
              this.changeCountyCode_c_t[ktem.code] = _countyCode;
            }
            areaList.county_list[_countyCode] = ktem.name;
          }
        }
      }
      console.log(JSON.stringareaList);
      return areaList;
    }
  }
};
</script>
